<template>
  <div class="tab-title-page my_index">
    <div class="flex data_wrap">
      <div class="flex-1" style="padding-left:80px">
        <div class="flex">
          <img class="money_icon" src="../../assets/images/balance.png" alt="可提现金额">
          <div class="flex-1" style="line-height:23px">
            <p>可提现金额（元）</p>
            <p class="red-font money_data">{{balance}}</p>
          </div>
        </div>
        <p style="margin-top:25px">
          <el-button v-if="$hasMethod('#recharge')" type="primary" size="small" @click="goToRecharge(0)">充值</el-button>
          <el-button v-if="$hasMethod('#withdraw')&&balance>0" type="warning" size="small" @click="$router.push({name:'myWithdraw'})">提现</el-button>
        </p>
      </div>
      <div class="flex-1" style="padding-left:80px">
        <div class="flex">
          <img class="money_icon" src="../../assets/images/balance.png" alt="可提现金额">
          <div class="flex-1" style="line-height:23px">
            <p>公证账户余额（元）</p>
            <p class="red-font money_data">{{shop_lease_balance}}</p>
          </div>
        </div>
        <p style="margin-top:25px">
          <el-button v-if="$hasMethod('#recharge')" type="primary" size="small" @click="goToRecharge(1)">充值</el-button>
        </p>
      </div>
      <div class="flex-1" style="border-left:1px solid #e6e6e6;padding-left:80px">
        <div class="flex">
          <img class="money_icon" src="../../assets/images/frozen.png" alt="冻结金额">
          <div class="flex-1" style="line-height:23px">
            <p>冻结金额（元）</p>
            <p class="red-font money_data">{{frozen}}</p>
          </div>
        </div>
        <p style="margin-top:35px" class="color-999">冻结金额为正在提现的金额</p>
      </div>
    </div>
    <el-divider class="middle_divider" />
    <div class="child_page">
      <div class="flex align-center table-top-btns">
        <h5 class="flex align-center">
          <svg-icon style="margin-right:15px" icon-class="list" :size="15" />账单明细
        </h5>
      </div>
      <el-table border :data="tableData">
        <el-table-column align="center" prop="id" label="ID" width="100" />
        <el-table-column align="center" prop="create_time" label="创建时间" width="100" />
        <el-table-column align="center" prop="trade_no" label="订单号" />
        <el-table-column align="center" prop="before_balance" label="操作前余额" />
        <el-table-column align="center" prop="after_balance" label="操作后余额" />
        <el-table-column align="center" prop="amount" label="操作金额" />
        <el-table-column align="center" prop="service_fee" label="手续费" />
        <el-table-column align="center" prop="remarks" label="备注" />
        <el-table-column align="center" label="操作类型">
          <template slot-scope="scope">
            <span>{{scope.row.trans_type==1?'结算':scope.row.trans_type==2?'退款':scope.row.trans_type==3?'充值':scope.row.trans_type==4?'买断':scope.row.trans_type==6?'提现':scope.row.trans_type==7?'增值服务业务充值':scope.row.trans_type==8?'购买合同':'其他业务'}}</span>
          </template>
        </el-table-column>
      </el-table>
      <custom-page ref="customPage" :total="total" @getList="getList" />
    </div>
  </div>
</template>

<script>
import { myAccount } from '@/api/account'
import customPage from '@/components/customPage'
import { withdrawalList } from '@/api/finance'
export default {
  components: { customPage },
  data() {
    return {
      balance: 0,
      frozen: 0,
      tableData: [],
      total: 0,
      shop_lease_balance:0
    }
  },
  methods: {
    goToRecharge(e) {
      let routeData = this.$router.resolve({
        name: 'recharge',
        query:{id:e}
      })
      window.open(routeData.href, '_blank')
    },
    getData() {
      myAccount().then(res => {
        const { balance, frozen,shop_lease_balance } = res
        this.balance = balance
        this.frozen = frozen
        this.shop_lease_balance=shop_lease_balance
      })
    },
    // 获取数据
    getList() {
      const { page, pageSize } = this.$refs.customPage
      withdrawalList({
        page,
        pageSize,
        adminMobile: '',
        status: '',
        arrivalTime: '',
        type: 1
      }).then(res => {
        this.tableData = res.data || []
        this.total = res.total || 0
      })
    },
  },
  mounted() {
    this.getData()
    this.getList()
  }
}
</script>

<style lang="scss" scoped>
.child_page {
  padding: 15px;
}

.data_wrap {
  padding: 20px 0;
  background-color: #ffffff;
  border-radius: 0 0 10px 10px;
}

.money_icon {
  width: 55px;
  height: 55px;
  margin-right: 15px;
}

.money_data {
  font-size: 28px;
  margin-top: 10px;
}
</style>
